import { useGameStore } from '@/store/game-store';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { Badge } from '@/components/ui/badge';
import { Link } from 'react-router-dom';
import { 
  Zap, 
  Sword, 
  Package, 
  ScrollText, 
  TrendingUp,
  Star,
  Clock,
  Award,
  Shield,
  Users
} from 'lucide-react';

export function HomePage() {
  const { player, quests, skills } = useGameStore();

  const activeQuests = quests.filter(q => q.status === 'active').slice(0, 3);
  const completedQuests = quests.filter(q => q.status === 'completed').length;
  const nextRealmExp = player.realm.requiredExp || 0;
  const expProgress = nextRealmExp > 0 ? (player.experience / nextRealmExp) * 100 : 100;

  return (
    <div className="space-y-6">
      {/* 欢迎区域 */}
      <div className="text-center space-y-2">
        <h1 className="text-3xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">
          欢迎回来，{player.name}
        </h1>
        <p className="text-slate-400">
          继续你的修仙之路，追求无上道果
        </p>
      </div>

      {/* 角色状态概览 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="bg-slate-800/50 border-slate-700">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-slate-400">当前境界</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-amber-400">{player.realm.name}</div>
            <p className="text-xs text-slate-500 mt-1">{player.realm.description}</p>
          </CardContent>
        </Card>

        <Card className="bg-slate-800/50 border-slate-700">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-slate-400">修为进度</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span className="text-slate-300">{player.experience}</span>
                <span className="text-slate-500">/ {nextRealmExp || '∞'}</span>
              </div>
              <Progress value={expProgress} className="h-2 bg-slate-700">
                <div 
                  className="h-full bg-gradient-to-r from-amber-500 to-amber-600 transition-all duration-300 rounded-full"
                  style={{ width: `${expProgress}%` }}
                />
              </Progress>
            </div>
          </CardContent>
        </Card>

        <Card className="bg-slate-800/50 border-slate-700">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-slate-400">已学技能</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-blue-400">{skills.length}</div>
            <p className="text-xs text-slate-500 mt-1">掌握的修仙法术</p>
          </CardContent>
        </Card>

        <Card className="bg-slate-800/50 border-slate-700">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-slate-400">完成任务</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-400">{completedQuests}</div>
            <p className="text-xs text-slate-500 mt-1">历练成就</p>
          </CardContent>
        </Card>
      </div>

      {/* 快捷操作 */}
      <Card className="bg-slate-800/50 border-slate-700">
        <CardHeader>
          <CardTitle className="text-amber-400 flex items-center space-x-2">
            <Star className="h-5 w-5" />
            <span>快捷操作</span>
          </CardTitle>
          <CardDescription className="text-slate-400">
            快速进入游戏各个功能模块
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            <Button asChild variant="outline" className="h-20 flex-col space-y-2 border-slate-600 hover:border-amber-400 hover:bg-slate-700">
              <Link to="/cultivation">
                <Zap className="h-6 w-6 text-amber-400" />
                <span className="text-slate-300">开始修炼</span>
              </Link>
            </Button>

            <Button asChild variant="outline" className="h-20 flex-col space-y-2 border-slate-600 hover:border-red-400 hover:bg-slate-700">
              <Link to="/battle">
                <Sword className="h-6 w-6 text-red-400" />
                <span className="text-slate-300">进入战斗</span>
              </Link>
            </Button>

            <Button asChild variant="outline" className="h-20 flex-col space-y-2 border-slate-600 hover:border-blue-400 hover:bg-slate-700">
              <Link to="/inventory">
                <Package className="h-6 w-6 text-blue-400" />
                <span className="text-slate-300">查看背包</span>
              </Link>
            </Button>

            <Button asChild variant="outline" className="h-20 flex-col space-y-2 border-slate-600 hover:border-green-400 hover:bg-slate-700">
              <Link to="/quest">
                <ScrollText className="h-6 w-6 text-green-400" />
                <span className="text-slate-300">接受任务</span>
              </Link>
            </Button>

            <Button asChild variant="outline" className="h-20 flex-col space-y-2 border-slate-600 hover:border-purple-400 hover:bg-slate-700">
              <Link to="/social">
                <Users className="h-6 w-6 text-purple-400" />
                <span className="text-slate-300">社交互动</span>
              </Link>
            </Button>

            <Button asChild variant="outline" className="h-20 flex-col space-y-2 border-slate-600 hover:border-red-400 hover:bg-slate-700">
              <Link to="/admin">
                <Shield className="h-6 w-6 text-red-400" />
                <span className="text-slate-300">管理面板</span>
              </Link>
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 进行中的任务 */}
      {activeQuests.length > 0 && (
        <Card className="bg-slate-800/50 border-slate-700">
          <CardHeader>
            <CardTitle className="text-amber-400 flex items-center space-x-2">
              <Clock className="h-5 w-5" />
              <span>进行中的任务</span>
            </CardTitle>
            <CardDescription className="text-slate-400">
              完成这些任务获得丰厚奖励
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {activeQuests.map((quest) => (
                <div key={quest.id} className="flex items-center justify-between p-4 bg-slate-700/50 rounded-lg border border-slate-600">
                  <div className="space-y-1">
                    <div className="flex items-center space-x-2">
                      <h4 className="font-medium text-slate-200">{quest.title}</h4>
                      <Badge variant={quest.type === 'main' ? 'default' : quest.type === 'daily' ? 'secondary' : 'outline'}>
                        {quest.type === 'main' ? '主线' : quest.type === 'daily' ? '日常' : '支线'}
                      </Badge>
                    </div>
                    <p className="text-sm text-slate-400">{quest.description}</p>
                    <div className="flex items-center space-x-4 text-xs text-slate-500">
                      <span>经验: +{quest.rewards.experience}</span>
                      <span>金币: +{quest.rewards.gold}</span>
                    </div>
                  </div>
                  <div className="text-right space-y-2">
                    <div className="text-sm text-slate-400">
                      {quest.progress}/{quest.maxProgress}
                    </div>
                    <Progress 
                      value={(quest.progress / quest.maxProgress) * 100} 
                      className="w-20 h-2 bg-slate-600"
                    >
                      <div 
                        className="h-full bg-green-500 transition-all duration-300 rounded-full"
                        style={{ width: `${(quest.progress / quest.maxProgress) * 100}%` }}
                      />
                    </Progress>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {/* 每日提醒 */}
      <Card className="bg-gradient-to-r from-slate-800/50 to-slate-700/50 border-slate-600">
        <CardContent className="pt-6">
          <div className="flex items-center space-x-4">
            <Award className="h-8 w-8 text-amber-400" />
            <div>
              <h3 className="font-semibold text-slate-200">修仙小贴士</h3>
              <p className="text-sm text-slate-400 mt-1">
                每日坚持修炼，境界提升更快。记得完成日常任务获得额外奖励！
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}